<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <script src="test.js"></script>
</head>

<body style="padding: 0px; margin: 0px;">
    <style>
        p {
            margin: 0;
        }
    </style>
    <div>
        <div style="width:100%;position:sticky;top: 0;">
            <img style="width:100%;display:block;" src="../images/aaa_01.jpg">
        </div>

        <div id="opacity1" style="width:100%;position:sticky;top: 0;">
            <img style="width:100%;display:block;" src="../images/aaa_02.jpg">
        </div>
        <div id="opacity2" style="width:100%;position:sticky;top: 0;">
            <img style="width:100%;display:block;" src="../images/aaa_03.jpg">
        </div>
        <script>
            let opacity1 = document.getElementById('opacity1');
            const ioOpacity1 = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio);
                opacityChange(entries[0], 'self', {
                    enhance: true,
                    opacityOffset: 0.25
                });
            }, {
                root: document,
                rootMargin: `${opacity1.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioOpacity1.observe(opacity1);

            let opacity2 = document.getElementById('opacity2');
            const ioOpacity2 = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio);
                opacityChange(entries[0], 'self', {
                    enhance: false,
                    opacityOffset: 0.25
                });
            }, {
                root: document,
                rootMargin: `${opacity2.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioOpacity2.observe(opacity2);
        </script>

        <div id="grey" style="width:100%;position:relative;">
            <img style="width:100%;display:block;" src="../images/aaa_04.jpg">
            <div style="position: absolute;top: 20%;left: 20%;height: 1000px;">
                <p style="position:sticky;top: 100px;left: 100px;font-size: 10vw;color: blue;">test</p>
            </div>
        </div>
        <script>
            let grey = document.getElementById('grey');
            const ioGrey = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio);
                greyChange(entries[0], 'self', {
                    greyOffset: -25
                });
            }, {
                root: document,
                rootMargin: `${grey.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioGrey.observe(grey);
        </script>
        <div id="width1"
            style="width:1920px;height:1258px;position:sticky;top: 0;display: flex;align-items: center;justify-content: center;">
            <img style="display:block;" src="../images/aaa_05.jpg">
        </div>
        <div id="width2"
            style="width:1920px;height:1258px;position:sticky;top: 0;display: flex;align-items: flex-start;justify-content: center;">
            <img style="display:block;" src="../images/aaa_04.jpg">
        </div>
        <script>
            let width1 = document.getElementById('width1');
            const ioWidth1 = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio);
                widthChange(entries[0], width1.children[0], 1920, {
                    smaller: false,
                    widthOffset: 0.05
                });
            }, {
                root: document,
                rootMargin: `${width1.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioWidth1.observe(width1);

            let width2 = document.getElementById('width2');
            const ioWidth2 = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio);
                widthChange(entries[0], width2.children[0], 1920, {
                    smaller: true,
                    widthOffset: 0.5
                });
            }, {
                root: document,
                rootMargin: `${width2.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioWidth2.observe(width2);
        </script>
        <div id="transform1" style="position:relative;">
            <img style="width: 100%;display:block;" src="../images/aaa_03.jpg">
            <video id="video" style="display:block;position: absolute;top: 0;left: 30%;width: 960px;"
                src="https://www.runoob.com/try/demo_source/movie.mp4" muted playsinline controls></video>
            <p id="transform2" style="position:absolute;top: 100px;left: 0px;font-size: 10vw;color: blue;">test</p>
        </div>
        <script>
            let video = document.getElementById('video');
            const ioVideo = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio)
                videoChange(entries[0]);
            }, {
                root: document,
                rootMargin: `0px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioVideo.observe(video)
        </script>
        <script>
            let transform1 = document.getElementById('transform1');
            const ioTransform1 = new IntersectionObserver(entries => {
                transformChange(entries[0], document.getElementById('transform2'), {
                    translateBegin: [-500, -500, -500],
                    translateEnd: [500, 500, 500],
                    translateEnable: [true, true, false],
                    scaleBegin: [1, 1, 1],
                    scaleEnd: [2, 2, 2],
                    scaleEnable: [true, true, false]
                });
            }, {
                root: document,
                rootMargin: `${transform1.clientHeight}px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioTransform1.observe(transform1);
        </script>
        <div id="text1" style="position:relative;">
            <img style="width: 100%;display:block;" src="../images/aaa_02.jpg">
            <p id="text2" class="text" style="position:absolute;top: 100px;left: 0px;font-size: 10vw;">test
            </p>
        </div>
        <style>
            .opacity1 {
                opacity: 0.2;
                color: red;
            }

            .opacity2 {
                opacity: 1;
                color: blue;
            }
        </style>
        <script>
            let text1 = document.getElementById('text1');
            const ioText1 = new IntersectionObserver(entries => {
                //console.log(entries, entries[0].intersectionRatio)
                classChange(entries[0], document.getElementById('text2'), [{
                    range: [0.1, 0.5],
                    className: "opacity1"
                },
                {
                    range: [0.5, 0.9],
                    className: "opacity2"
                }]);
            }, {
                root: document,
                rootMargin: `0px 0px 0px 0px`,
                threshold: getGrowingArray(0, 1, 0.01),
                trackVisibility: true,
                delay: 100
            })
            ioText1.observe(text1)
        </script>
        <div style="position:relative;">
            <img style="width: 100%;display:block;" src="../images/aaa_01.jpg">
            <p class="batch" style="position:absolute;top: 100px;left: 0px;font-size: 10vw;">test
            </p>
        </div>
        <div style="position:relative;">
            <img style="width: 100%;display:block;" src="../images/aaa_02.jpg">
            <p class="batch" style="position:absolute;top: 100px;left: 0px;font-size: 5vw;">test
            </p>
            <p class="batch" style="position:absolute;top: 300px;left: 0px;font-size: 5vw;">test2
            </p>
        </div>
        <style>
            .batch {
                opacity: 0;
                transform: translateY(-100px);
            }
            .batch.effect {
                opacity: 1;
                transform: translateY(0px);
                transition: all 1s ease 0s;
            }
        </style>
        <script>
            applyCommonEffect(document.getElementsByClassName("batch"), true, {
                root: document,
                rootMargin: `clientHeight`,
                threshold: getGrowingArray(0, 1, 0.01)
            }, true, classChange, [{
                range: [0.4, 1],
                className: "effect"
            }])
        </script>
    </div>
</body>

</html>